import React from 'react';
import { Menu, Icon,Modal } from 'antd';
import NavLink from './../components/menuBar/navLink'
import Header from './../components/officialHeader/header'
import Footer from './../components/officialFooter/footer'
import fund from './fund.css'
const SubMenu = Menu.SubMenu;

let FunderIndex = React.createClass({
    contextTypes: {
     router: React.PropTypes.object
    },
    getInitialState(){
        return {
            menuKeys: [{
                'name': '融资概况',
                'url': '/funder/resource/list',
                'className': 'one',
                'activeClass':''
            },{
                'name': '账号安全',
                'url': '/funder/accountSetting/index',
                'className': 'two',
                'activeClass':''
            },{
                'name': '资金统计',
                'url': '/funder/fundCount/list',
                'className': 'three',
                'activeClass':''
            },{
                'name': '资金台账',
                'url': '/funder/fundBook/list',
                'className': 'one',
                'activeClass':''
            },{
                'name': '账户管理',
                'url': '/funder/myCount',
                'className': 'five',
                'activeClass':''
            },{
              'name': '放款管理',
              'url': '/funder/loanManagement/index',
              'className': 'three',
              'activeClass': ''
            },{
                'name': '账户提现',
                'url': '/funder/cashCenter',
                'className': 'six',
                'activeClass':''
            }
            ], 
             visible: false
        }
    },
  
   logout() {
        this.setState({
        visible: true
        })
    },

   handleBack() {
       this.context.router.push('/');
   },

    handleOk() {
        Utils.sendAjax({
        url: '/funder/logout',
        callback: (result)=> {
            if (result.code == 200) {
            localStorage.funderUserName = '';
            localStorage.funderUserName = '';
            this.handleBack();
            this.handleCancel();
            }
        }
        })
    },

    handleCancel() {
        this.setState({
        visible: false
        })
    },
    componentDidMount(){
        this.getActive();
    },
    getActive(){
        let pathHash = window.location.hash;
        console.log(pathHash)
        let pathStr = pathHash.substring(2, pathHash.lastIndexOf('?'));
        let curKey = pathStr.split('/')[1];
        console.log(curKey)
        let menuKeys = this.state.menuKeys;
        let newKeys = [];
        menuKeys.forEach((item) => {
            let pathHash = item.url;
            let pathStr = pathHash.substring(1, pathHash.length);
            let key = pathHash.split('/')[2];
            console.log(key, curKey);
            if(key == curKey){
                item.activeClass = 'active';
            }else{
                item.activeClass = '';
            }
            newKeys.push(item);
        })
        this.setState({
            menuKeys:newKeys
        });
    },
    autoActive() {
        
        let menuKeys  = this.state.menuKeys;
        menuKeys.map((item) => {
                return (
                    <li key={k++} className={item.activeClass} ><NavLink to={item.url}><i className={item.className}></i>{item.name}</NavLink></li>
                )
            })  
    },
    render() {
        console.log(this.state.menuKeys)
        let resourceList = [{
                'name': '融资概况',
                'url': '/funder/resource/list',
                'className': 'one',
                'activeClass':'active'
            },{
                'name': '账号安全',
                'url': '/funder/accountSetting/index',
                'className': 'two',
                'activeClass':''
            },{
                'name': '资金统计',
                'url': '/funder/fundCount/list',
                'className': 'three',
                'activeClass':''
            },{
                'name': '资金台账',
                'url': '/funder/fundBook/list',
                'className': 'one',
                'activeClass':''
            },{
                'name': '账户管理',
                'url': '/funder/myCount',
                'className': 'five',
                'activeClass':''
            },{
              'name': '放款管理',
              'url': '/funder/loanManagement/index',
              'className': 'three',
              'activeClass': ''
            },{
                'name': '账户提现',
                'url': '/funder/cashCenter',
                'className': 'six',
                'activeClass':''
            }];
        let menuKeys  = (this.props.location.state !== 'resouce') ?  this.state.menuKeys : resourceList;
        let k= 0;
        console.log(this.props.location)
        return (
            <div>
                <Header />
                
                <div className="accountContainer">
                    <div className="wrap1180 clearfix">
                        <div className="accountNavigate fl">
                            <div className="logo_name">
                                <img src={require("./../assets/img/official/accountLogo_15_new.png")} width="50" height="50"/>
                                <span>{localStorage.funderUserName}</span>
                       
                                <span><a href="javascript:;" onClick={this.logout}>[退出]</a></span>
                            </div>
                            <ul onClick={this.getActive}>
                                {
                                    menuKeys.map((item) => {
                                        return (
                                            <li key={k++} className={item.activeClass} ><NavLink to={item.url}><i className={item.className}></i>{item.name}</NavLink></li>
                                        )
                                    }) 
                                }   
                            </ul>
                        </div> 
                        <div className="accountContent fr">
                            {this.props.children}
                        </div>
                    </div>
                </div>
                <Footer/> 
                <Modal title="退出" visible={this.state.visible} width={300}
                    onOk={this.handleOk} onCancel={this.handleCancel}>
                    <p>是否退出当前用户？</p>
                </Modal>
            </div>
        )
    }
})
export default FunderIndex